<script lang="ts" setup>
import { reactive, ref } from 'vue'
import TnSwitch from '@tuniao/tnui-vue3-uniapp/components/switch/src/switch.vue'
import TnButton from '@tuniao/tnui-vue3-uniapp/components/button/src/button.vue'
import TnIcon from '@tuniao/tnui-vue3-uniapp/components/icon/src/icon.vue'
import TnNavbar from '@tuniao/tnui-vue3-uniapp/components/navbar/src/navbar.vue'

import { useAppI18n } from '@/hooks/use-i18n'

const { t } = useAppI18n()

// 通知设置数据
const notificationSettings = reactive({
  pushNotification: true,
  soundNotification: true,
  vibrationNotification: false,
  doNotDisturb: false,
  doNotDisturbStart: '22:00',
  doNotDisturbEnd: '08:00',
  messageNotification: true,
  systemNotification: true,
  marketingNotification: false
})

// 免打扰时间选择器
const showStartTimePicker = ref(false)
const showEndTimePicker = ref(false)

// 切换通知设置
const toggleNotification = (key: keyof typeof notificationSettings, value: boolean) => {
  notificationSettings[key] = value
  
  // 保存到本地存储
  uni.setStorageSync('notificationSettings', notificationSettings)
  
  // 显示提示
  uni.showToast({
    title: value ? '已开启' : '已关闭',
    icon: 'success',
    duration: 1000
  })
}

// 保存设置
const saveSettings = () => {
  uni.setStorageSync('notificationSettings', notificationSettings)
  uni.showToast({
    title: '设置已保存',
    icon: 'success'
  })
}

// 重置设置
const resetSettings = () => {
  uni.showModal({
    title: '重置设置',
    content: '确定要重置所有通知设置吗？',
    success: (res) => {
      if (res.confirm) {
        Object.assign(notificationSettings, {
          pushNotification: true,
          soundNotification: true,
          vibrationNotification: false,
          doNotDisturb: false,
          doNotDisturbStart: '22:00',
          doNotDisturbEnd: '08:00',
          messageNotification: true,
          systemNotification: true,
          marketingNotification: false
        })
        
        uni.removeStorageSync('notificationSettings')
        uni.showToast({
          title: '设置已重置',
          icon: 'success'
        })
      }
    }
  })
}

// 加载设置
const loadSettings = () => {
  const savedSettings = uni.getStorageSync('notificationSettings')
  if (savedSettings) {
    Object.assign(notificationSettings, savedSettings)
  }
}

// 页面加载时加载设置
loadSettings()
</script>

<template>
  <view class="notification-page">
    <!-- 自定义导航栏 -->
    <TnNavbar
      :fixed="true"
      :transparent="false"
      :title="t('settings.notification')"
      :background-color="'#ffffff'"
      :color="'#000000'"
    />
    
    <view class="page-content">
      <view class="page-header">
        <view class="header-title">{{ t('settings.notification') }}</view>
        <view class="header-desc">管理您的通知偏好设置</view>
      </view>
    
    <!-- 基础通知设置 -->
    <view class="settings-section">
      <view class="section-title">基础通知</view>
      <view class="settings-list">
        <view class="setting-item">
          <view class="item-left">
            <view class="item-icon tn-gradient-bg__cool-1">
              <TnIcon name="notification-fill" />
            </view>
            <view class="item-content">
              <view class="item-title">推送通知</view>
              <view class="item-desc">接收应用推送消息</view>
            </view>
          </view>
          <TnSwitch 
            :value="notificationSettings.pushNotification"
            @change="(value) => toggleNotification('pushNotification', value)"
          />
        </view>
        
        <view class="setting-item">
          <view class="item-left">
            <view class="item-icon tn-gradient-bg__cool-2">
              <TnIcon name="sound-fill" />
            </view>
            <view class="item-content">
              <view class="item-title">声音提醒</view>
              <view class="item-desc">通知时播放提示音</view>
            </view>
          </view>
          <TnSwitch 
            :value="notificationSettings.soundNotification"
            @change="(value) => toggleNotification('soundNotification', value)"
          />
        </view>
        
        <view class="setting-item">
          <view class="item-left">
            <view class="item-icon tn-gradient-bg__cool-3">
              <TnIcon name="vibration-fill" />
            </view>
            <view class="item-content">
              <view class="item-title">震动提醒</view>
              <view class="item-desc">通知时设备震动</view>
            </view>
          </view>
          <TnSwitch 
            :value="notificationSettings.vibrationNotification"
            @change="(value) => toggleNotification('vibrationNotification', value)"
          />
        </view>
      </view>
    </view>
    
    <!-- 免打扰设置 -->
    <view class="settings-section">
      <view class="section-title">免打扰</view>
      <view class="settings-list">
        <view class="setting-item">
          <view class="item-left">
            <view class="item-icon tn-gradient-bg__cool-4">
              <TnIcon name="moon-fill" />
            </view>
            <view class="item-content">
              <view class="item-title">免打扰模式</view>
              <view class="item-desc">在指定时间内不接收通知</view>
            </view>
          </view>
          <TnSwitch 
            :value="notificationSettings.doNotDisturb"
            @change="(value) => toggleNotification('doNotDisturb', value)"
          />
        </view>
        
        <view v-if="notificationSettings.doNotDisturb" class="time-settings">
          <view class="time-item">
            <view class="time-label">开始时间</view>
            <view class="time-value" @tap="showStartTimePicker = true">
              {{ notificationSettings.doNotDisturbStart }}
              <TnIcon name="right" />
            </view>
          </view>
          <view class="time-item">
            <view class="time-label">结束时间</view>
            <view class="time-value" @tap="showEndTimePicker = true">
              {{ notificationSettings.doNotDisturbEnd }}
              <TnIcon name="right" />
            </view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 通知类型设置 -->
    <view class="settings-section">
      <view class="section-title">通知类型</view>
      <view class="settings-list">
        <view class="setting-item">
          <view class="item-left">
            <view class="item-icon tn-gradient-bg__cool-5">
              <TnIcon name="message-fill" />
            </view>
            <view class="item-content">
              <view class="item-title">消息通知</view>
              <view class="item-desc">接收聊天和消息通知</view>
            </view>
          </view>
          <TnSwitch 
            :value="notificationSettings.messageNotification"
            @change="(value) => toggleNotification('messageNotification', value)"
          />
        </view>
        
        <view class="setting-item">
          <view class="item-left">
            <view class="item-icon tn-gradient-bg__cool-6">
              <TnIcon name="set-fill" />
            </view>
            <view class="item-content">
              <view class="item-title">系统通知</view>
              <view class="item-desc">接收系统更新和维护通知</view>
            </view>
          </view>
          <TnSwitch 
            :value="notificationSettings.systemNotification"
            @change="(value) => toggleNotification('systemNotification', value)"
          />
        </view>
        
        <view class="setting-item">
          <view class="item-left">
            <view class="item-icon tn-gradient-bg__cool-7">
              <TnIcon name="ad-fill" />
            </view>
            <view class="item-content">
              <view class="item-title">营销通知</view>
              <view class="item-desc">接收优惠活动和推广信息</view>
            </view>
          </view>
          <TnSwitch 
            :value="notificationSettings.marketingNotification"
            @change="(value) => toggleNotification('marketingNotification', value)"
          />
        </view>
      </view>
    </view>
    
    <!-- 操作按钮 -->
    <view class="action-buttons">
      <TnButton 
        @click="saveSettings"
        type="primary"
      >
        保存设置
      </TnButton>
      <TnButton 
        @click="resetSettings"
        type="default"
      >
        重置设置
      </TnButton>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.notification-page {
  background-color: var(--tn-color-gray-light);
  min-height: 100vh;
}

.page-content {
  padding: 30rpx;
  padding-top: calc(30rpx + 88px);
}

.page-header {
  margin-bottom: 40rpx;
  
  .header-title {
    font-size: 36rpx;
    font-weight: bold;
    color: var(--tn-text-color-primary);
    margin-bottom: 10rpx;
  }
  
  .header-desc {
    font-size: 28rpx;
    color: var(--tn-text-color-secondary);
  }
}

.settings-section {
  margin-bottom: 40rpx;
  
  .section-title {
    font-size: 32rpx;
    font-weight: bold;
    color: var(--tn-text-color-primary);
    margin-bottom: 20rpx;
    padding-left: 20rpx;
  }
  
  .settings-list {
    background-color: #fff;
    border-radius: 20rpx;
    overflow: hidden;
    
    .setting-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 30rpx;
      border-bottom: 1rpx solid var(--tn-color-gray-light);
      
      &:last-child {
        border-bottom: none;
      }
      
      .item-left {
        display: flex;
        align-items: center;
        flex: 1;
        
        .item-icon {
          width: 60rpx;
          height: 60rpx;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 20rpx;
          color: #fff;
          font-size: 28rpx;
        }
        
        .item-content {
          flex: 1;
          
          .item-title {
            font-size: 32rpx;
            color: var(--tn-text-color-primary);
            margin-bottom: 8rpx;
          }
          
          .item-desc {
            font-size: 26rpx;
            color: var(--tn-text-color-secondary);
          }
        }
      }
    }
    
    .time-settings {
      padding: 0 30rpx 30rpx 110rpx;
      
      .time-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20rpx 0;
        border-bottom: 1rpx solid var(--tn-color-gray-light);
        
        &:last-child {
          border-bottom: none;
        }
        
        .time-label {
          font-size: 28rpx;
          color: var(--tn-text-color-primary);
        }
        
        .time-value {
          display: flex;
          align-items: center;
          font-size: 28rpx;
          color: var(--tn-text-color-secondary);
          
          .tn-icon {
            margin-left: 10rpx;
            font-size: 24rpx;
          }
        }
      }
    }
  }
}

.action-buttons {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}
</style> 